<template>
    <div class="el-color-predefine">
        <div class="el-color-predefine__colors">
            <div class="el-color-predefine__color-selector"
                 :class="{selected: item.selected, 'is-alpha': item._alpha < 100}"
                 v-for="(item, index) in rgbaColors"
                 :key="colors[index]"
                 @click="handleSelect(index)">
                <div :style="{'background-color': item.value}">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Color from '../color';

    export default {
        props: {
            colors: {type: Array, required: true},
            color: {required: true}
        },
        data() {
            return {
                rgbaColors: this.parseColors(this.colors, this.color)
            };
        },
        methods: {
            handleSelect(index) {
                this.color.fromString(this.colors[index]);
            },
            parseColors(colors, color) {
                return colors.map(value => {
                    const c = new Color();
                    c.enableAlpha = true;
                    c.format = 'rgba';
                    c.fromString(value);
                    c.selected = c.value === color.value;
                    return c;
                });
            }
        },
        watch: {
            '$parent.currentColor'(val) {
                const color = new Color();
                color.fromString(val);

                this.rgbaColors.forEach(item => {
                    item.selected = color.compare(item);
                });
            },
            colors(newVal) {
                this.rgbaColors = this.parseColors(newVal, this.color);
            },
            color(newVal) {
                this.rgbaColors = this.parseColors(this.colors, newVal);
            }
        }
    };
</script>